<template>
  <div style="margin-top: 90px" v-if="!isPC"></div>
  <div v-if="!this.isUnLock">
    <div style="display: flex;justify-content: center;margin-top: 20px;align-items: center" class="adminLock" >
      <span style="width: 70px;">管理员</span>
      <el-input show-password type="password"  placeholder="请输入管理员密码" v-model="this.adminpwd"/>
    </div>
    <div style="display: flex;justify-content: flex-end;align-items: flex-end;margin-top: 20px;">
      <el-button @click="forgetPwd" type="info">忘记密码</el-button>
      <el-button @click="unlockAdmin" type="primary">发送解锁</el-button>
    </div>
  </div>


  <div  style="display: flex;justify-content: center;margin-top: 20px;" v-if="this.isUnLock" class="adminUnlock">
    <el-button @click="downloadMysqlFile" type="primary">DB备份下载</el-button>
  </div>
  <canvas id="pinkboard"></canvas>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "MhConsole",
  data(){
    return{
      adminpwd:'woaini',
      isUnLock:false,
      isPC:true
    }
  },
  methods:{

    checkScreenWidth() {

      // 根据屏幕宽度判断是否为移动设备
      this.isPC = window.innerWidth <= 600; // 你可以根据实际需求设置阈值

      },

    // 忘记密码
    forgetPwd(){

    },
    // 解锁管理员权限
    unlockAdmin(){

      if(this.adminpwd === 'woaini'){
        this.isUnLock = true;
        ElMessage({
          message: "我也是",
          type: 'success',
        })
      }else{
        ElMessage({
          message: "密码不正确！",
          type: 'error',
        })
      }
    },
    async downloadMysqlFile(){
      // 下载文件
      try {
        ElMessage({
          message: "成功加入下载队列...",
          type: 'success',
        })
        const response = await axios.get('api/database/backupSqlFile', {
          responseType: 'blob',
        });

        // 保存文件到本地文件系统中
        let fileUrl = window.URL.createObjectURL(new Blob([response]))
        let a = document.createElement('a')
        a.style.display = "none";
        a.href = fileUrl
        a.setAttribute('download','mysql.sql');
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(a.href)
        document.body.removeChild(a)


      } catch (error) {
        ElMessage({
          message: "下载失败，"+error,
          type: 'error',
        })

      }
    },

    initlcanvas(){
      let canvas;
      canvas.width  = canvas.clientWidth;

      canvas.height = canvas.clientHeight;
    },
    onResize(){

    }

  },
  mounted() {
    // 在组件挂载后检查屏幕宽度
    this.checkScreenWidth();
    // 添加屏幕尺寸变化的事件监听器
    window.addEventListener('resize', this.checkScreenWidth);
  },
}
</script>

<style scoped>

</style>